<template>
  <view class="planPage">
    <view class="topbg"> </view>
    <view class="planBox">
      <view class="planBt">
        <view class="planBtImg"><img :src="planTopBgImg" /></view>
        <view class="con">
          <view>根据您的情况可选择以下计划之一:</view>
        </view>
        <view class="planTopIcon"><img :src="planTopIcon" /></view>
      </view>
      <view class="serverBox blue">
        <view class="serverTitle">《{{ basicsServer.packageName }}》</view>
        <view class="one">
          智能化、科学化、专业化、精细化的健康管理工具助您享健康生活。
          <!-- 个性化健康管理服务 适用于<span class="orange">无基础慢病、患慢病但大病风险较低</span>人群 -->
        </view>
        <!-- <view class="serverList">
          <view class="spans">适用于无基础慢病 | </view>
          <view class="spans">患慢病但大病风险较低人群 </view>
        </view> -->
        <view class="details" @click="goDetailPage(basicsServerId)">了解详情>></view>
        <!-- <view class="serverJoinNum"
          >已有<span class="orange">{{ bascServerSaleNum }}</span
          >人选择加入</view
        > -->
        <view class="serverPackBg"><img :src="radiosOrange" /></view>
        <view class="goLook"
          ><view class="btn" @click="goLook('basics', basicsServer.packageName)">申请加入</view></view
        >
        <view class="clear"></view>
      </view>

      <view v-if="conditionPermit && seniorServerBuyNum" class="serverBox paddingBot10">
        <view class="serverTitle">《{{ seniorServer.packageName }}》</view>
        <view class="one"> 30万元重大疾病医疗保险助您大病不再愁，看病不再贵。 </view>
        <!-- <view class="serverList">
          <view class="spans">三定送药服务 | </view>
          <view class="spans">视频医生 | </view>
          <view class="spans">健康管理服务一应俱全</view>
        </view> -->

        <view class="details" @click="goDetailPage(seniorServerId)">了解详情>></view>
        <view class="postionBox">
          <view v-if="isSeniorServerBuyNumShow" class="serverJoinNum"
            >剩余名额：<span class="orange">{{ seniorServer.storeNumber }}</span
            >名</view
          >
          <view class="goLook"
            ><view class="btn" @click="goLook('senior', seniorServer.packageName)">申请加入</view></view
          >
          <view class="clear"></view>
        </view>
        <view class="clear"></view>
        <view class="tips">
          名额有限，优先提供给<span class="orange"
            >愿意接受用药管理、大病预警服务的50-100岁，且符合保险公司承保要求的老年慢病人群</span
          >。
        </view>
        <view class="serverPackBg"><img :src="radiosOrange" /></view>
      </view>
    </view>
    <popCom v-if="popShow" :title="title" :content="content" @popCenter="popCenter" @popClose="popClose"> </popCom>
  </view>
</template>

<script>
import {
  getTagsList,
  getServerPackInof,
  bingPatientTag,
  getServerPackSaleNum,
  getUserInfoByPatientId,
  getServerPack
} from '@/api/join.js';
import { insurance_orders } from '@/api/drugInfo';
import { basicsName, seniorName } from '@/common/baseUrl.js';
import { getInfoByIdCard } from '@/utils/optimize.js';
import popCom from '@/components/popCom';
import planTopIcon from '@/static/icon/planIcon.png';
import radiosOrange from '@/static/icon/radiosOrange.png';
import radiosBlue from '@/static/icon/radiosBlue.png';
export default {
  components: {
    popCom
  },
  data() {
    return {
      planTopBgImg:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/topbg.png',
      planTopIcon: planTopIcon,
      radiosBlue: radiosBlue,
      radiosOrange: radiosOrange,
      title: '我是标题',
      content: '我是内容',
      popShow: false,
      formData: this.$store.getters.storeFormData || {},
      isIll: false,
      basicsServer: {},
      seniorServer: {},
      tagList: null,
      tagId: '',
      conditionPermit: false,
      bascServerSaleNum: '1656',
      seniorServerBuyNum: undefined,
      isSeniorServerBuyNumShow: true
    };
  },
  computed: {
    icd() {
      return this.$store.state.join.storeFormData.sickList;
    },
    idCard() {
      return this.$store.state.join.storeFormData.idCard;
    },
    buyPatientId() {
      return this.$store.state.join.storeFormData.patientId;
    },
    // 被保险人信息
    beneficiaryInfo() {
      return this.$store.state.join.storeFormData;
    },
    // 购买人id
    buyerId() {
      return this.$store.state.join.patientid;
    },
    // 关系
    identityId() {
      return this.$store.state.join.storeFormData.identity;
    }
  },
  onLoad() {
    this.getTagListObj();
    this.getServerInfo();
    // this.getCondition();
  },

  methods: {
    async getServerInfo() {
      const { data: serverList } = await getServerPack();
      let indexSJ = 0;
      serverList.forEach((item, index) => {
        item.products.forEach((val) => {
          if (val.productType === 1) {
            indexSJ = index;
          }
        });
      });
      let seniorServerData = {};
      let basicsServerData = {};
      if (indexSJ === 0) {
        seniorServerData = serverList[0];
        basicsServerData = serverList[1];
      } else {
        seniorServerData = serverList[1];
        basicsServerData = serverList[0];
      }
      this.seniorServerId = seniorServerData.packageId;
      this.basicsServerId = basicsServerData.packageId;
      const serverDataStore = [
        {
          name: seniorServerData.packageName,
          id: seniorServerData.packageId,
          type: 'senior'
        },
        {
          name: basicsServerData.packageName,
          id: basicsServerData.packageId,
          type: 'basics'
        }
      ];
      this.$store.commit('join/SET_SERVERPACKLIST', serverDataStore);
      this.getServerBasicsPackObj();
      this.getServerSeniorPackObj();
    },
    getCondition() {
      // 通过购买人身份证获取年龄，判断是否大于50岁
      let age = getInfoByIdCard(this.idCard, 3);
      // 是否患病 1健康，2患病
      // this.formData.sick = 2;
      // 疾病是否在拒保范围: true: 拒保
      let refuse = false;
      if (this.icd) {
        refuse = this.icd.some((item) => item.icd10 && item.icd10[0] === 'C') || false;
      }
      // 服务包中城市是否与前面选择的对应，如果为空，则全国都可以
      let checkCity = false;
      let adress = this.seniorServer.areas;
      if (!adress || adress.length < 1) {
        checkCity = true;
      } else {
        checkCity = adress.some((item) => {
          // 有的服务包只有省份的id，没事市的id，那就匹配全省。
          if (item.cityId && this.formData.address) {
            return item.cityId === this.formData.address.cityId;
          }
          if (item.provincesId && this.formData.address) {
            return item.provincesId === this.formData.address.provincesId;
          }
          return false;
        });
      }
      if (age >= 50 && this.formData.sick === 2 && !refuse && checkCity) {
        this.conditionPermit = true;
      } else {
        this.conditionPermit = false;
      }
    },
    getTagListObj() {
      const self = this;
      getTagsList().then((res) => {
        if (res.code === 0) {
          self.tagList = res.data;
        } else {
          uni.showToast({ title: res.message, icon: 'none' });
        }
      });
    },
    async goLook(id, title) {
      let data = {
        patientId: this.buyPatientId,
        tag: this.tagId
      };

      if (id === 'basics') {
        if (this.tagList && this.tagList.length > 0) {
          let itemData = this.tagList.find((item) => {
            return item.name === basicsName;
          });
          data.tag = itemData ? itemData.id : '';
        }
      } else {
        if (this.tagList && this.tagList.length > 0) {
          let itemData = this.tagList.find((item) => {
            return item.name === seniorName;
          });
          data.tag = itemData ? itemData.id : '';
        }
      }
      if (data.tag) {
        await bingPatientTag(data).then((res) => {
          if (res.code !== 0) {
            uni.showToast({ title: res.message, icon: 'none' });
          }
        });
      } else {
        console.log('没有查到标签');
        // uni.showToast({ title: '没有查到标签', icon: 'none' });
      }
      if (id === 'basics') {
        this.goServerWorkPage();
      } else {
        this.$store.commit('join/SET_SERVERPACKINFO', {
          id: this.seniorServerId,
          basics: 0,
          title: title,
          serverId: this.seniorServer.insurancePackagePros[0].id
        });

        this.$wxPromise.navigateTo({
          url: `/pages/serviceProcess/index?serverId=${this.seniorServerId}`
        });
      }
    },
    async goServerWorkPage() {
      // [获取保险包信息, 获取会员信息]
      const { data: buyerInfo } = await getUserInfoByPatientId(this.buyerId);
      let serverPackgProsId = this.basicsServer.insurancePackagePros[0].id; // 获取保险档次id
      const data = {
        insuredId: this.beneficiaryInfo.patientId, // 被保险人id
        insuredName: this.beneficiaryInfo.name, // 被保险人姓名
        insuredPhone: this.beneficiaryInfo.phone || this.beneficiaryInfo.machineNumber, // 被保险人手机号
        insuredIdCard: this.beneficiaryInfo.idCard, // 被保险人身份证
        insurerId: this.buyerId, // 购买人id
        insurerName: buyerInfo.name, // 购买人姓名
        insurerPhone: buyerInfo.phone, // 购买人手机号
        insurerIdCard: buyerInfo.idCard, // 购买人身份证
        insurancePackageProsId: serverPackgProsId, // 保险档次id
        payWay: 1, // 1年缴 2月缴 3季缴
        usePoints: 0, // 默认1 否0 积分支付
        useAccount: 0, // 默认1 否0 余额支付
        payments: '[]', // 支付方式
        relationWithInsurer: this.identityId, // 关系 1 本人 2配偶 3父母 4子女
        cid: uni.getStorageSync('cid') || '' // 渠道码
      };

      // 创建服务包
      let self = this;
      insurance_orders(data).then((res) => {
        uni.hideLoading();
        if (res.code !== 0) {
          uni.showModal({
            title: '提示',
            content: res.message || res.code + '：服务错误',
            showCancel: false,
            confirmText: '查看服务',
            confirmColor: '#179cd5',
            success: function (res) {
              if (res.confirm) {
                self.$wxPromise.reLaunch({
                  // url: '/pages/service/index?patientId=' + self.beneficiaryInfo.patientId
                  url: '/pages/index/index?patientId=' + self.beneficiaryInfo.patientId
                });
              }
            }
          });
          return;
        } else {
          uni.showToast({
            title: '加入成功',
            icon: 'none'
          });
          self.$wxPromise.navigateTo({
            url: `/pages/helpResult/index?packageId=${this.basicsServerId}&insuredId=${this.beneficiaryInfo.patientId}`
          });
        }
      });
    },
    popClose() {
      this.popShow = false;
    },
    popCenter() {
      this.popShow = false;
    },
    async getServerBasicsPackObj() {
      await getServerPackInof(this.basicsServerId).then((res) => {
        if (res.code === 0) {
          this.basicsServer = res.data[0];
        } else {
          uni.showToast({ title: res.message, icon: 'none' });
        }
      });
    },
    async getServerSeniorPackObj() {
      await getServerPackInof(this.seniorServerId).then((res) => {
        if (res.code === 0) {
          this.seniorServer = res.data[0];
          console.log(123123, res.data);
          if (res.data[0].storeNumber && res.data[0].storeNumber === 0) {
            this.seniorServerBuyNum = false;
          } else {
            if (!res.data[0].storeNumber) {
              this.isSeniorServerBuyNumShow = false;
            } else {
              this.isSeniorServerBuyNumShow = true;
            }
            this.seniorServerBuyNum = true;
          }
          this.getCondition();
        } else {
          uni.showToast({ title: res.message, icon: 'none' });
        }
        return;
      });
      getServerPackSaleNum(this.basicsServerId).then((res) => {
        if (res.code === 0) {
          this.bascServerSaleNum = res.data.sold;
        }
      });
    },
    goDetailPage(id) {
      this.$wxPromise.navigateTo({
        url: `/pages/service/introduce?insurancePackageId=${id}`
      });
    }
  }
};
/*
Monday Tuesday Wednesday Thursday Friday Saturday Sunday
*/
</script>
<style lang="scss">
.planPage {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .topbg {
    height: 196rpx;
    background: #f96a6a;
  }
  .planBox {
    margin: 0 24rpx;
    margin-top: -130rpx;
    border-radius: 24rpx;
    background: linear-gradient(1deg, #ffffff 0%, #fbe4e4 100%);
    padding-bottom: 4rpx;
    .planBt {
      height: 188rpx;
      position: relative;
      .planBtImg {
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .con {
        position: absolute;
        left: 24rpx;
        top: 72rpx;
        font-size: 26rpx;
        line-height: 56rpx;
      }
      .planTopIcon {
        position: absolute;
        right: 24rpx;
        top: 30rpx;
        img {
          width: 102rpx;
          height: 120rpx;
        }
      }
    }
    .serverBox {
      border-radius: 24rpx;
      overflow: hidden;
      padding-bottom: 30rpx;
      background: #fbe4e4;
      margin: 24rpx;
      margin-top: 0;
      position: relative;
      .serverTitle {
        background: rgba(243, 78, 28, 0.3);
        font-size: 34rpx;
        padding: 24rpx 40rpx;
        font-weight: 500;
        .bold {
          font-weight: 500;
          padding-left: 16rpx;
        }
      }
      .one {
        font-size: 30rpx;
        padding: 0 40rpx;
        margin-top: 20rpx;
        .orange {
          color: #f34e1c;
          .bigsize {
            font-size: 30rpx;
          }
        }
      }
      .serverList {
        padding-left: 40rpx;
        .spans {
          display: inline-block;
          padding-left: 10rpx;
          font-size: 32rpx;
        }
        .spans:first-child {
          padding-left: 0;
        }
        margin-bottom: 60rpx;
      }
      .details {
        font-size: 28rpx;
        padding: 24rpx 40rpx;
        color: #2680eb;
      }
      .serverJoinNum {
        padding-left: 40rpx;
        float: left;
        font-size: 24rpx;
        line-height: 60rpx;
        color: rgba(0, 0, 0, 0.55);
        .orange {
          color: #f34e1c;
        }
        .clear {
          clear: both;
          overflow: hidden;
          height: 0;
        }
      }
      .serverPackBg {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 326rpx;
        height: 280rpx;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .goLook {
        margin-right: 40rpx;
        position: relative;
        z-index: 1;
        text-align: right;
        width: 180rpx;
        float: right;
        .btn {
          padding: 14rpx 40rpx;
          background: #f34e1c;
          border-radius: 58rpx;
          color: #fff;
          font-size: 24rpx;
        }
      }
      .marginNone {
        margin: 0;
      }
      .tips {
        display: block;
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.55);
        padding: 24rpx 40rpx;
      }
    }
    .paddingBot10 {
      padding-bottom: 10rpx;
    }
    .blue {
      background: rgba(38, 128, 235, 0.1);
      .serverTitle {
        background: rgba(38, 128, 235, 0.2);
      }
    }
  }
}
.postionBox {
  position: relative;
  .serverJoinNum {
    padding-left: 40rpx;
    float: left;
    font-size: 24rpx;
    line-height: 60rpx;
    .orange {
      color: #f34e1c;
    }
    .clear {
      clear: both;
      overflow: hidden;
      height: 0;
    }
  }
  .serverPackBg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 326rpx;
    height: 280rpx;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}
.orange {
  color: #f34e1c;
  .bigsize {
    font-size: 32rpx;
  }
}
</style>
